.amplify-divider {
  //these internal css variables are used to update the values that are influenced by multiple modified states
  --amplify-internal-divider-size: var(
    --amplify-components-divider-border-width
  );
  border-color: var(--amplify-components-divider-border-color);
  border-style: var(--amplify-components-divider-border-style);
  border-width: 0;
  opacity: var(--amplify-components-divider-opacity);
  padding: 0;
  display: flex;
  position: relative;
  text-align: center;
  justify-content: center;

  &::after {
    content: attr(data-label);
    position: absolute;
    transform: translateY(-50%);
    font-size: var(--amplify-components-divider-label-font-size);
    padding-inline: var(--amplify-components-divider-label-padding-inline);
    background-color: var(--amplify-components-divider-label-background-color);
    color: var(--amplify-components-divider-label-color);
  }

  &--small {
    --amplify-internal-divider-size: var(
      --amplify-components-divider-small-border-width
    );
  }
  &--large {
    --amplify-internal-divider-size: var(
      --amplify-components-divider-large-border-width
    );
  }
  &--horizontal {
    width: 100%;
    border-bottom-width: var(--amplify-internal-divider-size);
  }

  &--vertical {
    border-left-width: var(--amplify-internal-divider-size);
    flex-direction: column;

    &::after {
      top: auto;
      transform: translateX(-50%);
      padding-block: 0;
      padding-inline: 0;
    }
  }
}
